// 生产模式
// 运行命令 npx webpack --config ./config/webpack.prod.js或者npm run build
// 默认情况下，生产模式 html压缩和js压缩

const path = require("path"); //nodejs核心模块，专门用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html模板问题
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //将css提取到单独的文件中（以前css是在js中）
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//用来压缩css



// 用来获取处理样式的loader
function getStyleLoader(pre) {
	return [
		// "style-loader", //将js中css通过创建style标签添加到html文件中生效
		MiniCssExtractPlugin.loader, //将css提取到单独的文件中
		"css-loader", //将css资源编译成commonjs的模块到js中
		{
			loader: 'postcss-loader',
			options: {
				postcssOptions: {
					plugins: [
						[
							'postcss-preset-env', //处理css兼容问题，IE等
						],
					],
				},
			},
		},
		pre
	].filter(Boolean);//pre不传值时，为undefined，filter(Boolean)可以过滤掉undefined
}
// 配置
module.exports = {
	// 入口
	entry: './src/main.js',
	// 输出
	output: {
		// __dirname nodejs变量，代表当前文件的文件夹目录
		path: path.resolve(__dirname, '../dist'),
		filename: 'static/js/main.js',
		//原理：在打包前，将整个目录内容清空，再进行打包
		clean: true
	},
	// 加载器
	module: {
		rules: [
			// loader配置
			{
				test: /\.css$/, //检测.css结尾的文件。正则：\代表转义，$代表结尾
				//use执行顺序是从右到左，从下到上
				use: getStyleLoader()
			},
			{
				test: /\.less$/, //检测.less结尾的文件。
				use: getStyleLoader('less-loader')
			},
			{
				test: /\.(png|jpe?g|gif|webp)$/, //检测图片 
				type: "asset", //类型为asset，会被转成base64
				parser: {
					dataUrlCondition: {
						// 小于10kb的图片转base64
						maxSize: 10 * 1024 // 10kb
					}
				},
				generator: {
					//hash 文件名，通常文件名是哈希，:10表示截取10位哈希；ext 文件扩展名；query 参数
					filename: 'static/images/[hash:10][ext][query]'
				}
			},
			{
				test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //检测字体图标等其他资源，需要在avi后面加上其他资源后缀名
				type: "asset/resource",
				generator: {
					//hash 文件名，通常文件名是哈希；ext 文件扩展名；query 参数
					filename: 'static/media/[hash:10][ext][query]'
				}
			},
			{
				test: /\.js$/,
				exclude: /node_modules/, //排除node_modules文件不处理
				loader: 'babel-loader',
			}
		]

	},
	// 插件
	plugins: [
		new HtmlWebpackPlugin({
			// 模板：以public/index.html为模板创建新的文件
			// 新的html特点 1.结构和原来一致 2.自动引入打包的
			template: path.resolve(__dirname, "../public/index.html")
		}),
		new MiniCssExtractPlugin({
			'filename': 'static/css/main.css'
		}),
		 new CssMinimizerPlugin(),
	],
	// 模式
	mode: 'production', //生产模式
	// 生产模式没有开发服务器
}
